<template>
  <div class="choice-list">
    <div class="choice-wrap">
      <van-list v-model="cur_loading" :finished="cur_finished" @load="onLoad" :immediate-check="false">
        <transition-group tag="div" name="list">
          <div class="choice-item rippleMagic" v-for="v in list" :key="'choice_'+v.id" @click="jumpTo(v)">
            <div class="wrap-top">
              <div class="img-box">
                <img :src="v.logo">
              </div>
              <div class="choice-name">
                <p class="name ellipsis">{{ v.cname }}</p>
                <div class="pro ellipsis">
                  <span>{{ v.industryid }}</span>
                  <span>{{ v.attrid }}</span>
                  <span>{{ v.sizeid }}</span>
                </div>
              </div>
            </div>
            <div class="tag">
              <span class="tag-item" v-for="(s, n) in v.welfare" :key="'welfare_' + n">{{ s }}</span>
            </div>
            <div class="company">
              <div class="pos">
                <p>
                  <i class="iconfont icon-company"></i><span>{{ v.place_num || 0 }} 个工作地点</span>
                </p>
                <p>
                  <i class="iconfont icon-edit"></i><span>{{ v.job_num || 0 }} 个职位</span>
                </p>
              </div>
              <div class="btn-box">查看企业</div>
            </div>
          </div>
        </transition-group>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default () {
        return []
      },
    },
    loading: {
      type: Boolean,
      default () {
        return false
      },
    },
    finished: {
      type: Boolean,
      default () {
        return false
      },
    },
  },
  name: 'choice',
  data () {
    return {
      cur_loading: this.loading,
      cur_finished: this.finished,
    }
  },
  watch: {
    loading (val) {
      this.cur_loading = val
    },
    finished (val) {
      this.cur_finished = val
    },
    cur_loading (val) {
      this.$emit('update:loading', val)
    },
    cur_finished (val) {
      this.$emit('update:finished', val)
    },
  },
  methods: {
    onLoad () {
      this.$emit('toFetch')
    },
    jumpTo (obj) {
      if (!obj.id) {
        this.$alertWarn('未获取到ID，请刷新后再试！')
        return
      }
      let timers = setTimeout(() => {
        this.$router.push({
          path: 'company',
          query: {
            id: obj.id,
          },
        })
        clearTimeout(timers)
        timers = null
      }, 300)
    },
  },
}
</script>

<style lang="stylus" scoped>
.choice-list

  .choice-wrap
    height 100%

  .van-list
    height 100%

    & > div
      background #f6f7f8

  .choice-item
    padding 20px
    min-height 152px
    width 375px
    overflow hidden
    position relative
    margin-bottom 10px
    background #fff

    &:first-child
      border-top 0

    &:last-child
      margin 0

    .wrap-top
      display flex
      .img-box
        flex 0 0 58px
        height 58px
        width 58px
        line-height 56px
        border 1px solid #ebebeb
        border-radius 50%
        text-align center
        overflow hidden
        img
          width 100%
          vertical-align middle

      .choice-name
        margin-left: 10px;
        flex 1
        font-size 18px
        height 30px

        .name
          margin-top: 5px;
          width 270px
          color #333

        .pro {
          margin-top: 5px;
          transform: scale(.83);
          transform-origin left center

          span {
            display: inline-block;
            color: #666;
            font-size: 12px;
            padding-right: 10px;
            margin-right: 10px;
            border-right: 1px solid #ebebeb;

            &:first-child {
              margin-left: 0;
            }

            &:last-child {
              margin: 0;
              border: 0;
            }
          }
        }

    .tag {
      margin-top: 10px;
      width: 125%;
      transform: scale(.83);
      transform-origin left

      span {
        font-size: 12px;
        color: #666;
        padding: 0 5px;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 10px;
        background: #f6f7f8;
      }
    }

    .company
      display flex
      align-items center
      justify-content space-between

      .pos {
        p {
          display inline-block
          float left
          margin-right 10px
          height 30px
          line-height 30px
        }
        span, i {
          color: #999;
          font-size: 12px;
        }
        i{
          margin-right: 10px;
        }
      }

      .btn-box
        float right
        margin-top 8px
        flex 0 0 100px
        height 30px
        line-height 28px
        text-align center
        color $color-main
        border-radius 15px
        font-size 12px
        border 1px solid $color-main

</style>
